<template>
  <div class="box-content">
    <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" />
    <Search
      ref="topSearch"
      class="search"
      placeholder="商品名称|商品编号"
      :isAdd="false"
      :isScreen="true"
      :isType="true"
      @onSearch="onSearch"
      @onScreen="onScreen"
    ></Search>
    <van-dropdown-menu active-color="#1989fa">
      <van-dropdown-item @change="changed1" v-model="params.type" :options="options1" />
      <van-dropdown-item @change="changed2" v-model="params.warehouseType" :options="options2" />
      <div class="drop-wrap">
          <div class="drop-search" v-show="searchVisible">
            <van-search
              v-model="searchValue"
              show-action
              placeholder="请输入搜索关键词"
              @input="searchWarehose"
              @search="searchWarehose"
              :clearable="false"
              @cancel="getWarehose"
            />
          </div>
        <van-dropdown-item @change="changed3" v-model="params.warehouseId" :options="options3" @opened="searchVisible = true" @closed="searchVisible = false">
        </van-dropdown-item>
      </div>
    </van-dropdown-menu>
    <search-tag
      ref="SearchTag"
      :propsForSon="propsForSon"
      @getCategory="getCategory"
      v-show="showSearchTag"
    ></search-tag>

    <!--分页列表 -->
    <div class="listBox" :style="{height: GLOBAL.currentEnvironment ? 'calc(100vh - 1rem)' : 'calc(100vh - 1.5rem)'}">
      <pageList
        ref="pageList"
        :checkedShow="checkedShow"
        :operationTxt="operationTxt"
        @operationItem="operationItem"
        :columns="columns"
        :listUrl="listUrl"
        @getCheckedValue="getCheckedValue"
        @handleList="handleList"
      >
      <div class="rt-column" slot="body" slot-scope="{ item }">
            <div class="rt-row">
              <div class="column">
                <span class="column-t">合格品</span>
                <div class="column-c" style="color:red">{{item.goodsQualifiedNum|| '--' }}{{item.assistUnit}}</div>
              </div>
              <div class="column">
                <span class="column-t">报废品</span>
                <div class="column-c">{{item.goodsScrapNum|| '--' }}{{item.assistUnit}}</div>
              </div>
            </div>
            <div class="rt-row">
              <div class="column">
                <span class="column-t">合格品(F)</span>
                <div class="column-c" style="color:red">{{item.goodsQualifiedNumTextAssistUnit|| '--' }}</div>
              </div>
              <div class="column">
                <span class="column-t">报废品(F)</span>
                <div class="column-c">{{item.goodsScrapNumTextAssistUnit|| '--' }}</div>
              </div>
            </div>
          </div>
      </pageList>
    </div>
  </div>
</template>

<script>
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import { getDictModel, wmsWarehouseGetWmsWaterhouse, wmsWarehouseQueryList } from '@/api/system'
export default {
  name: "carRoomList",
  components: { Navbar, TabBar, pageList, Search, SearchTag},
  data() {
    return {
      title: "库存管理",
      rtitle: "",
      rname: "", //search
      active: '0',
      checkedShow: false, //列表是否支持选择
      operationTxt: "", //选择按钮名称
      listUrl: "/wms/wmsGoodsWaterLevel/list", //列表接口
      columns: {
        titleKey: "goodsCode", //标题
        subtitleKey: "goodsName",//副标题
        content: [
          //内容
          {
            name: "合格品",
            key: ["goodsQualifiedNum", "assistUnit"],
          },
          {
            name: "报废品",
            key: ["goodsScrapNum", "assistUnit"],
          },
        ],
        labelKey: ["spec"], //标签
        // operation: [],
        operationText: '水位管理',
      },
      showSearchTag: false, 
      keyword: "",
      params: {
        type: '',
        warehouseType: '',
        warehouseId: ''
      },
      options1: [],
      options2: [],
      options3: [],
      options3_copy: [],
      propsForSon: {},
      searchValue: '',
      searchVisible: false
    };
  },
  beforeRouteLeave(to, from, next) {
    let that = this
    switch (true) {
      case that.showSearchTag:
        that.showSearchTag = false;
        this.title = '库存管理'
        next(false)
        break;
      case !that.showSearchTag:
        next();
        break;
    }
  },
  computed: {},
  mounted() {this.searchQuery()},
  created() {
    let parameters = { dictCode: 'wms_goods_type' }
    getDictModel(parameters).then((res) => {
      if (res.code == 200) {
        this.options1 = [{text: '物品类型', value: ''}]
        this.options1 = this.options1.concat(res.result)
        this.$refs.SearchTag.options1 = this.options1
      }
    })
    wmsWarehouseGetWmsWaterhouse().then((res) => {
      if (res.code == 200) {
        this.options2 = [{text: '仓库类型', value: ''}]
        res.result.forEach(item => {
          this.options2.push({
            text: item.warehouseTypeTxt || '--',
            value: item.warehouseType
          })
        })
        this.$refs.SearchTag.options2 = this.options2
      }
    })
    this.getWarehose()
  },
  methods: {
    getWarehose(obj) {
      wmsWarehouseQueryList(obj).then((res) => {
        if (res.code == 200) {
          this.options3 = [{text: '全部仓库', value: ''}]
          this.options3 = this.options3.concat(res.result)
          this.options3_copy = this.options3
          this.$refs.SearchTag.options3 = this.options3
        }
      })
    },
    searchWarehose(v) {
      if (v) {
        this.getWarehose({warehouseName: v})
      } else {
        this.getWarehose()
      }
    },
    // 水位管理
    operationItem(item) {
      this.$router.push({
        path: '/stockManagementForm',
        query: { info: JSON.stringify(item) }
      })
    },
    changed1(v) {
      this.options1.forEach(item => {
        if (item.value == v) {
          this.params.typeText = v ? item.text : ''
        }
      })
      this.searchQuery()
    },
    changed2(v) {
      this.options2.forEach(item => {
        if (item.value == v) {
          this.params.warehouseTypeText = v ? item.text : ''
        }
      })
      this.searchQuery()
    },
    changed3(v) {
      this.options3.forEach(item => {
        if (item.value == v) {
          this.params.warehouseText = v ? item.text : ''
        }
      })
      this.searchQuery()
    },
    onSearch(v) {
      this.keyword = v
      console.log(this.keyword)
      this.searchQuery()
      
    },
    onScreen() {
      console.log("筛选");
      this.keyword = this.$refs.topSearch.value
      this.propsForSon = {
        ...this.params
      }
      this.propsForSon.keyword = this.keyword
      this.showSearchTag = true
      this.title="更多筛选"
    },
    getCategory(p, k) {
      this.params = p
      this.keyword = k
      this.showSearchTag = false
      console.log(this.params);
      this.$refs.topSearch.value = k
      this.title="库存管理"
      this.searchQuery()
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    //列表点击事件
    handleList(id, item, type) {
      this.$router.push({
        path: '/stockManagementDetail',
        query: { id: item.goodsId }
      })
    },
    // 加载列表
    getList() {
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 搜索
    searchQuery() {
      // 搜索条件
      let queryParam = {
        ...this.params,
      };
      queryParam.keyword = this.keyword
      this.$refs.pageList.searchQuery(queryParam);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    goSearch() {
      this.$router.push({ path: "/carRoomPlaneSearch" });
    },
  },
};
</script>
<style lang="scss" scoped>
.rt-row {
  display: flex;
  .column {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.14rem;
    margin: 0.08rem 0.125rem;
    .column-t {
      color: #888888;
    }
    .column-c {
      color: #191f25;
      width: 1.5rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.box-content {
  height: 100vh;
  overflow-y: scroll;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 0.16rem 0.16rem 0.16rem;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 0.23rem;
        margin-right: 0.12rem;
        text-align: center;
        padding: 0.04rem 0.28rem;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.foot-slot {
  height: 0.33rem;
  line-height: 0.33rem;
  display: flex;
  justify-content: space-between;
  margin: 0.15rem 0.12rem 0 0.12rem;
  font-size: 0.14rem;
  color: #1890ff;
}
.listBox {
  height: calc(100vh - 1.5rem);
  overflow-y: auto;
}
/deep/.van-nav-bar {
  z-index: 99!important;
}
.drop-wrap {
  position: relative;
  /deep/.van-dropdown-item__content {
    padding-top:40px!important;
  }
  .drop-search {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 99999;
  }
}
</style>